<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="名称">
      <el-input v-model="formInline.customer" placeholder="请输入名称" clearable />
    </el-form-item>
    <el-form-item label="手机号码">
      <el-input v-model="formInline.telephone" placeholder="请输入手机号码" clearable />
    </el-form-item>
    <el-form-item label="联系电话">
      <el-input v-model="formInline.phone_num" placeholder="请输入联系电话" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="gettableData">查询</el-button>
      <el-button @click="kannoFn">重置</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
    </el-form-item>
  </el-form>
  <el-button type="primary" :icon="Plus" @click="centerDialogVisible = true">新增</el-button>
  <el-button :icon="Delete" @click="rangedel">删除</el-button>
  <el-button :icon="CircleCheck" @click="rangeCanenable">启用</el-button>
  <el-button :icon="CircleClose" @click="rangeDisenable">禁用</el-button>
  <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="supplier" label="#" align="center">
      <template v-slot="scope">
        {{ scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template v-slot="script">
        <el-link type="primary" @click="upd(script.row.customerid)">编辑</el-link>&nbsp;&nbsp;
        <el-link type="primary" @click="del(script.row.customerid)">删除</el-link>
      </template>
    </el-table-column>
    <el-table-column prop="customer" label="名称" align="center" />
    <el-table-column prop="contacts" label="联系人" align="center" />
    <el-table-column prop="telephone" label="手机号码" align="center" />
    <el-table-column prop="phone_num" label="联系电话" align="center" />
    <el-table-column prop="email" label="电子邮箱" align="center" />
    <el-table-column prop="begin_need_get" label="期初应收" align="center" />
    <el-table-column prop="begin_need_pay" label="期末应收" align="center" />
    <el-table-column prop="tax_rate" label="税率(%)" align="center" />
    <el-table-column prop="sort" label="排序" align="center" />
    <el-table-column prop="enabled" label="状态" align="center">
      <template v-slot="script">
        <el-tag type="success" v-if="script.row.enabled == false">启用</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[10, 15, 20, 30]"
    :background="false" layout="total, prev, pager, next, sizes, jumper" :total="page.totalCount"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  <!-- ----对话框---- -->
  <el-dialog v-model="centerDialogVisible" title="新增" width="1000" align-center>
    <span>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称:" prop="customer">
              <el-input v-model="ruleForm.customer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人:" prop="contacts">
              <el-input v-model="ruleForm.contacts" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="telephone">
              <el-input v-model="ruleForm.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="phone_num">
              <el-input v-model="ruleForm.phone_num" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input v-model="ruleForm.email" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真:" prop="fax">
              <el-input v-model="ruleForm.fax" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="期初应收:" prop="begin_need_get">
              <el-input v-model="ruleForm.begin_need_get" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期末应收:" prop="begin_need_pay">
              <el-input v-model="ruleForm.begin_need_pay" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="纳税人识别号:" prop="tax_num">
              <el-input v-model="ruleForm.tax_num" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率(%):" prop="tax_rate">
              <el-input v-model="ruleForm.tax_rate" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开户行:" prop="bank_name">
              <el-input v-model="ruleForm.bank_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号:" prop="account_number">
              <el-input v-model="ruleForm.account_number" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="ruleForm.address" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序:" prop="sort">
              <el-input v-model="ruleForm.sort" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:" prop="description">
              <el-input v-model="ruleForm.description" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
      </div>
    </template>
  </el-dialog>
  <!-- ----对话框---- -->
  <el-dialog v-model="centerDialogVisible01" title="编辑" width="1000" align-center>
    <span>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="名称:" prop="customer">
              <el-input v-model="form.customer" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人:" prop="contacts">
              <el-input v-model="form.contacts" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号码" prop="telephone">
              <el-input v-model="form.telephone" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话:" prop="phone_num">
              <el-input v-model="form.phone_num" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电子邮箱:" prop="email">
              <el-input v-model="form.email" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真:" prop="fax">
              <el-input v-model="form.fax" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="期初应收:" prop="begin_need_get">
              <el-input v-model="form.begin_need_get" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="期末应收:" prop="begin_need_pay">
              <el-input v-model="form.begin_need_pay" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="纳税人识别号:" prop="tax_num">
              <el-input v-model="form.tax_num" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税率(%):" prop="tax_rate">
              <el-input v-model="form.tax_rate" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开户行:" prop="bank_name">
              <el-input v-model="form.bank_name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号:" prop="account_number">
              <el-input v-model="form.account_number" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址" prop="address">
              <el-input v-model="form.address" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序:" prop="sort">
              <el-input v-model="form.sort" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:" prop="description">
              <el-input v-model="form.description" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="UpdateData()">编辑</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { GetCustomerShow, DeleteCustomer, RangeDeleteCustomer, AddCustomer, UpdateCustomerCanenable, UpdateCustomerDisable, GetCustomerInfo, UpdateCustomer } from '@/api/Requisitions/index'
import { type DelCustomerList, type customerinput, type CustomerData, type UpdateCustomerData } from '@/api/Requisitions/type'
import { ref, reactive, onMounted } from "vue"
import { Plus, Delete, CircleCheck, CircleClose } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

onMounted(() => {
  gettableData();
})

//重置
function kannoFn() {
  location.reload()
}

//分页条件
const page = reactive({
  pageSize: 10,
  pageIndex: 1,
  totalCount: 0,
  totalPage: 0
})

//查询条件
const formInline = reactive<customerinput>({
  pageSize: page.pageSize,
  pageIndex: page.pageIndex,
  customer: "",
  telephone: "",
  phone_num: ""
})

//显示
const tableData = ref([])
const gettableData = async () => {
  await GetCustomerShow(formInline).then(function (res) {
    console.log(res.data);
    tableData.value = res.data.data;
    page.totalCount = res.data.totalCount;
    page.totalPage = res.data.totalPage
  })
}

//更改页容量
const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  gettableData();
}
//跳转第几页
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  gettableData();
}
//多选
const check = ref([])
const handleSelectionChange = (val: []) => {
  check.value = val
}
//单删
const del = async (dal: any) => {
  await DeleteCustomer(dal).then(function (res) {
    if (res.data > 0) {
      ElMessage.success("删除成功");
      gettableData();
    } else {
      ElMessage.error("删除失败");
    }
  })
}
//批删
const niuma: any = reactive<DelCustomerList>({
  ids: []
})
const rangedel = () => {
  if (check.value.length <= 0) {
    ElMessage.error("至少选择一项");
    return;
  }
  ElMessageBox.confirm(
    '确认删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {

      niuma.ids = check.value.map((ele: any) => ele.customerid);
      await RangeDeleteCustomer(niuma.ids).then(function (res) {
        if (res.data > 0) {
          ElMessage.success("删除成功");
          gettableData();
        } else {
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
//启用
const rangeCanenable = () => {
  if (check.value.length <= 0) {
    ElMessage.error("至少选择一项");
    return;
  }
  ElMessageBox.confirm(
    '是否操作选中数据?',
    '确认操作',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      niuma.ids = check.value.map((ele: any) => ele.customerid);
      await UpdateCustomerCanenable(niuma.ids).then(function (res) {
        if (res.data > 0) {
          ElMessage.success("启用成功");
          gettableData();
        } else {
          ElMessage.error("启用失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
//禁用
const rangeDisenable = () => {
  if (check.value.length <= 0) {
    ElMessage.error("至少选择一项");
    return;
  }
  ElMessageBox.confirm(
    '是否操作选中数据?',
    '确认操作',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      niuma.ids = check.value.map((ele: any) => ele.customerid);
      await UpdateCustomerDisable(niuma.ids).then(function (res) {
        if (res.data > 0) {
          ElMessage.success("禁用成功");
          gettableData();
        } else {
          ElMessage.error("禁用失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}
//对话框状态
const centerDialogVisible = ref(false)
const ruleForm = reactive<CustomerData>({
  customer: "",
  contacts: "",
  phone_num: "",
  email: "",
  description: "",
  isystem: null,
  type: "",
  enabled: false,
  advance_in: 0,
  begin_need_get: '',
  begin_need_pay: '',
  all_need_get: null,
  all_need_pay: null,
  fax: "",
  telephone: "",
  address: "",
  tax_num: "",
  bank_name: "",
  account_number: "",
  tax_rate: '',
  sort: "",
  tenant_id: null,
  delete_flag: false
})
//正则验证
const rules = reactive<FormRules>({
  customer: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  telephone: [
    //{ required: true, message: '名称不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' },
  ],
  phone_num: [
    //{ required: true, message: '名称不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '联系电话格式不正确', trigger: 'blur' },
  ],
  email: [
    //{ required: true, message: '名称不能为空', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '电子邮箱格式不正确', trigger: 'blur' },
  ],
  tax_rate: [
    //{ required: true, message: '名称不能为空', trigger: 'blur' },
    { pattern: /^[0-9]*$/, message: '只能输入数字格式', trigger: 'blur' },
  ],
})
//添加
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await AddCustomer(ruleForm).then(function (res) {
        if (res.data > 0) {
          ElMessage.success("添加成功");
          centerDialogVisible.value = false;
          gettableData();
        }
        else if (res.data == -1) {
          ElMessage.error("客户已存在");
          return;
        }
        else {
          ElMessage.error("添加失败");
        }
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//取消
const resetForm = (formEl: FormInstance | undefined) => {
  centerDialogVisible.value = false;
  centerDialogVisible01.value = false;
  if (!formEl) return
  formEl.resetFields()
}
//反填
const form = reactive<UpdateCustomerData>({
  customerid: null,
  customer: '',
  contacts: '',
  phone_num: '',
  email: '',
  description: '',
  isystem: null,
  type: '',
  enabled: null,
  advance_in: null,
  begin_need_get: null,
  begin_need_pay: null,
  all_need_get: null,
  all_need_pay: null,
  fax: '',
  telephone: '',
  address: '',
  tax_num: '',
  bank_name: '',
  account_number: '',
  tax_rate: null,
  sort: '',
  tenant_id: null,
  delete_flag: null
})
const centerDialogVisible01 = ref(false)
const upd = (customerid: any) => {
  centerDialogVisible01.value = true;
  Fan(customerid);
}
const Fan = async (customerid: any) => {
  await GetCustomerInfo(customerid).then((res) => {
    console.log(res.data);
    let d = res.data;
    form.customerid = d.customerid,
      form.customer = d.customer,
      form.contacts = d.contacts,
      form.phone_num = d.phone_num,
      form.email = d.email,
      form.description = d.description,
      form.isystem = d.isystem,
      form.type = d.type,
      form.enabled = d.enabled,
      form.advance_in = d.advance_in,
      form.begin_need_get = d.begin_need_get,
      form.begin_need_pay = d.begin_need_pay,
      form.all_need_get = d.all_need_get,
      form.all_need_pay = d.all_need_pay,
      form.fax = d.fax,
      form.telephone = d.telephone,
      form.address = d.address,
      form.tax_num = d.tax_num,
      form.bank_name = d.bank_name,
      form.account_number = d.account_number,
      form.tax_rate = d.tax_rate,
      form.sort = d.sort,
      form.tenant_id = d.tenant_id,
      form.delete_flag = d.delete_flag
  })
}
//修改
const UpdateData = async () => {
  await UpdateCustomer(form).then((res) => {
    if (res.data > 0) {
      ElMessage.success("添加成功");
      centerDialogVisible01.value = false;
      gettableData();
    }
    else if (res.data == -1) {
      ElMessage.error("客户已存在");
      return;
    }
    else {
      ElMessage.error("添加失败");
    }
  })
}
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.el-row {
  margin-bottom: 24px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 100px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>